css: Define a higher contrast insensitive text style for card elements

- fixes an oversight in color definitions for insensitive style text on cards where contrast was insufficient

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/8683
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3998>

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 0412e4f420d3b0043b6f497bc174fb7514dca6c3..3a7d49c7caaeea498b8893c95ad37ac961c04adc 100644 (file)
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -68,3 +68,10 @@ $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_colo
 
 // accent colors
 $accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 20%), st-lighten(-st-accent-color, 30%));
+
+//
+// Special Case Colors
+//
+
+// increase contrast on insensitive_fg_color since card elements have a lighter background
+$card_insensitive_fg_color: if($variant =='light', darken($insensitive_fg_color, 5%), lighten($insensitive_fg_color, 9%));
\ No newline at end of file

diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index ac622cbdef7b71ec6bb9c0c47d984dabddbd67b1..40c9074acac9dfba6a68dd588377aed0953794c4 100644 (file)
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -67,6 +67,12 @@ $active_fg_color: lighten($fg_color, 22%);
 // accent colors
 $accent_borders_color: st-lighten(-st-accent-color, 30%);
 
+//
+// Special Case Colors
+//
+
+$card_insensitive_fg_color: $fg_color;
+
 //
 // High Contrast specific definitions
 //

diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index a4c6a88708979cb2740adac91d897fa55022f03b..bb9852f5eb184ab2b1a03209a6a4c055d87496ea 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -164,7 +164,7 @@
     // event title
     .events-title {
       @extend %heading;
-      color: $insensitive_fg_color;
+      color: $card_insensitive_fg_color;
       padding-bottom: $base_padding;
     }
 
@@ -184,12 +184,12 @@
         .event-time {
           @extend %numeric;
           @extend %caption;
-          color: $insensitive_fg_color;
+          color: $card_insensitive_fg_color;
         }
       }
 
       .event-placeholder {
-        color: $insensitive_fg_color;
+        color: $card_insensitive_fg_color;
         font-style: italic;
       }
     }
@@ -202,7 +202,7 @@
   // title
   .world-clocks-header {
     @extend %heading;
-    color: $insensitive_fg_color;
+    color: $card_insensitive_fg_color;
 
     // change style when no world clocks are configured
     &.no-world-clocks {
@@ -232,7 +232,7 @@
     .world-clocks-timezone {
       @extend %numeric;
       @extend %caption;
-      color: $insensitive_fg_color;
+      color: $card_insensitive_fg_color;
     }
   }
 }
@@ -249,7 +249,7 @@
 
       .weather-header {
         @extend %heading;
-        color: $insensitive_fg_color;
+        color: $card_insensitive_fg_color;
 
          // change style when no location is configured
         &.no-location {

diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 5e8812f7c7e68c43ac0e8436a2a77fa5f5d91dd3..6be1400b4a939af8d0b188e54b8a959d2c5679b0 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -99,7 +99,7 @@
   // message header
   .message-header {
     spacing: $base_padding;
-    color: $insensitive_fg_color;
+    color: $card_insensitive_fg_color;
     padding:0 $base_padding;
 
     // remove side padding to accommodate the close button
@@ -126,7 +126,7 @@
       // Time label
       .event-time {
         @extend %caption;
-        color: $insensitive_fg_color;
+        color: $card_insensitive_fg_color;
         // Add bottom padding to align the app name with the time horizontally
         padding-bottom: to_em(1px);